<template>
	<view class="page">
		<view class="group_2">
			<view class="d-flex flex-row align-center justify-center" style="height: 350rpx;margin-top: 20rpx;">
				<view class="d-flex flex-column align-center justify-center">
					<view class="">
						<u-upload :fileList="fileList1" name="1" width="340px" height="150px" @afterRead="afterRead"
							@delete="deletePic" multiple :maxCount="1">
							<!-- <image src="https://cdn.uviewui.com/uview/demo/upload/positive.png" 
								mode="widthFix" style="width: 250px;height: 150px;"></image> -->
						</u-upload>
					</view>
					<view class=""
						style="width: 160rpx;height: 50rpx;color: #307fff;font-size: 24rpx;text-align: center;border-radius: 25rpx;margin-right: 20rpx;line-height: 50rpx;">
						上传校区主图
					</view>
				</view>
			</view>
		</view>
		<view class="group_3">
			<text lines="1" class="text_8">校区名称</text>
			<view class="item">
				<input type="text" placeholder="请输入校区名称" class="atinput" v-model="venue_name" />
			</view>

			<text lines="1" class="text_8">负责人</text>
			<view class="item">
				<input type="text" placeholder="请输入负责人" class="atinput" v-model="leader" />
			</view>
			<!-- <view class="item">
				<input type="text" placeholder="请选择负责人" disabled v-model="userInfo.occupation_relation"
					@click="showoccupation = true" class="atinput" />
			</view>
			<u-picker :show="showoccupation" :columns="occupation_status" keyName="label" @confirm="addoccupation"
				@cancel="showoccupation = false">
			</u-picker> -->

			<text lines="1" class="text_8">运动类型</text>
			<view class="item">
				<view class=" week-list flex-wrap">
					<view class="week-item" :class="{'active': jiaoSelect.includes(item.id)}" v-for="item in jiaoList"
						:key="item.id" @click="handjiao(item)">
						{{ item.name }}
					</view>
					<!-- <view class="week-item active1" @click="selectAlljiao">
						全选
					</view> -->
				</view>
			</view>

			<text lines="1" class="text_8">教室信息</text>
			<view class="item">
				<view class="d-flex flex-column  justify-center">
					<view class="">
						<!-- <u-upload :fileList="fileList2" name="2" width="340px" height="50px" @afterRead="afterRead2"
							@delete="deletePic2" multiple :maxCount="3" /> -->
						<view class="">
							<van-uploader @delete="deleteImg5" :deletable="true" :fileList="fileList5"
								@after-read="afterRead5" max-count="9" />
						</view>
					</view>
				</view>
			</view>

			<text lines="1" class="text_8">校区环境图片</text>
			<view class="item">
				<view class="d-flex flex-column justify-center">
					<view class="">
						<van-uploader @delete="deleteImg6" :deletable="true" :fileList="fileList6"
							@after-read="afterRead6" max-count="9" />
					</view>
				</view>
			</view>

			<text lines="1" class="text_8">校区资质图片</text>
			<view class="item">
				<view class="d-flex flex-column justify-center">
					<view class="">
						<van-uploader @delete="deleteImg7" :deletable="true" :fileList="fileList7"
							@after-read="afterRead7" max-count="9" />
					</view>
				</view>
			</view>

			<text lines="1" class="text_8">联系电话</text>
			<view class="item">
				<input type="number" placeholder="请输入联系电话" class="atinput" v-model="phone" maxlength="11" />
			</view>
			<text lines="1" class="text_8">校区地址</text>
			<view class="item">
				<u-textarea v-model="address" placeholder="请输入内容" maxlength='-1'></u-textarea>
			</view>
			<text lines="1" class="text_8">备注说明</text>
			<view class="item">
				<u-textarea v-model="description" placeholder="请输入内容" maxlength='-1'></u-textarea>
			</view>
			<view class="" style="width: 100%;height: 12vh;"></view>
		</view>
		<view class="d-flex flex-row justify-space-between justify-center align-center"
			style="position: fixed;bottom: 0;height: 120rpx;background-color: #fff;width: 100%;padding: 0 8%;z-index: 99;">
			<view class=""
				style="width: 45%;height: 70rpx;background: #ffffff;color: #000000;font-size: 24rpx;text-align: center;line-height: 70rpx;border:#9d9d9d 1rpx solid">
				取消
			</view>
			<view class="" @click="addclick"
				style="width: 45%;height: 70rpx;background: linear-gradient(0deg, rgba(214, 53, 53, 0.9), rgba(255, 64, 64, 0.93), rgba(250, 142, 142, 0.93));color: #ffffff;font-size: 24rpx;text-align: center;line-height: 70rpx;">
				确定创建
			</view>
		</view>
	</view>
	</view>
</template>

<script>
	const venues = require("@/api/venues/venues.js");
	export default {
		data() {
			return {
				fileList1: [],
				fileList2: [],
				fileList3: [],
				fileList4: [],
				fileList5: [],
				fileList6: [],
				fileList7: [],
				url_phone: '',
				fileList: [], //图片列表
				url_list2: [],
				url_list3: [],
				url_list4: [],
				showoccupation: false, //职业
				occupation_status: [], //职业
				occupation_list: [{
						id: 1,
						label: "张三"
					},
					{
						id: 2,
						label: "李四"
					},
					{
						id: 3,
						label: "王五"
					}
				],

				userInfo: {
					occupation_relation: '',
					occupation_relation_id: '',
					occupation_jineng: '',
					occupation_jineng_id: '',
					occupation_changguan: "",
					occupation_changguan_id: "",
					occupation_xcx: '',
					occupation_xcx_id: '',
				},
				venue_name: "",
				leader: "",
				phone: "",
				address: '',
				description: '',
				jiaoList: [],
				jiaoSelect: [], //选中的
				pid: '',
				schoollist: [],
				id: ''
			}
		},
		onLoad(options) {
			if (options.status == 1) {
				const selectionArrs = JSON.parse(decodeURIComponent(options.selectionArr))
				this.schoollist = selectionArrs
				console.log(this.schoollist,'this.schoollist')
				this.venue_name = this.schoollist.venue_name //校区名称
				this.leader = this.schoollist.leader //负责人
				this.phone = this.schoollist.phone // 手机号
				this.address = this.schoollist.address //校区地址
				this.description = this.schoollist.description //备注说明
				this.projectIds = this.schoollist.projects.map(project => project.id);
				this.jiaoSelect = [...this.projectIds];
				const initialSelectedIds = this.jiaoSelect;
				initialSelectedIds.forEach(id => {
					if (!this.jiaoSelect.includes(id)) {
						this.jiaoSelect.push(id);
					}
				});
				this.id = this.schoollist.id
				// 教室信息
				if (this.schoollist.banner) {
					let banner5list = this.schoollist.banner
					let banners5Array = banner5list.split('|');
					// 去除可能的空白字符（如果 URL 前后有空格）
					banners5Array = banners5Array.map(link => link.trim());
					this.fileList55 = banners5Array
					this.fileList55.forEach(link => {
						this.fileList5.push({
							url: link
						});
					});
				}
				if (this.schoollist.environment) {
					// 校区环境图片
					let banner6list = this.schoollist.environment
					let banners6Array = banner6list.split('|');
					// 去除可能的空白字符（如果 URL 前后有空格）
					banners6Array = banners6Array.map(link => link.trim());
					this.fileList66 = banners6Array
					this.fileList66.forEach(link => {
						this.fileList6.push({
							url: link
						});
					});
				}
				if (this.schoollist.certification) {
					// 校区资质图片
					let banner7list = this.schoollist.certification
					let banners7Array = banner7list.split('|');
					// 去除可能的空白字符（如果 URL 前后有空格）
					banners7Array = banners7Array.map(link => link.trim());
					this.fileList77 = banners7Array
					this.fileList77.forEach(link => {
						this.fileList7.push({
							url: link
						});
					});
				}


				// 校区主图
				this.fileList1.push({
					url: this.schoollist.venue_thumb
				});
				this.url_phone = this.schoollist.venue_thumb
			}

			this.pid = options.pid
			this.shuju()
			this.getProjects()
		},
		methods: {
			async getProjects() {
				let params = {
					pid: this.pid,
				};
				let res = await venues.getProjects(params);
				if (res.code === 1) {
					this.jiaoList = res.data
				}
			},
			handjiao(item) {
				let data = item.id;
				// 使用indexOf检查是否已选中，避免重复或遗漏
				const index = this.jiaoSelect.indexOf(data);
				if (index > -1) {
					// 如果已选中，则移除
					this.jiaoSelect.splice(index, 1);
				} else {
					// 如果未选中，则添加
					this.jiaoSelect.push(data);
				}
			},
			// 新增的全选方法
			selectAllvenues() {
				if (this.venuesSelect.length === this.venuesList.length) {
					// 如果已全选，则清空选中数组
					this.venuesSelect = [];
				} else {
					// 如果未全选，则选中所有项目
					this.venuesSelect = this.venuesList.map(item => item.id);
				}
			},

			async addclick() {
				let that = this
				if (that.url_phone == '') {
					uni.showToast({
						title: '请输入校区主图',
						icon: 'none'
					})
					return
				}
				if (that.venue_name == '') {
					uni.showToast({
						title: '请输入校区名称',
						icon: 'none'
					})
					return
				}
				if (that.leader == '') {
					uni.showToast({
						title: '请输入负责人',
						icon: 'none'
					})
					return
				}
				if (this.jiaoSelect == '') {
					uni.showToast({
						title: '请选择运动类型',
						icon: 'none'
					})
					return
				}
				if (this.fileList5 == '') {
					uni.showToast({
						title: '请选择教室信息',
						icon: 'none'
					})
					return
				}
				if (this.fileList6 == '') {
					uni.showToast({
						title: '请选择校区环境',
						icon: 'none'
					})
					return
				}
				if (this.fileList7 == '') {
					uni.showToast({
						title: '请选择校区资质',
						icon: 'none'
					})
					return
				}
				if (this.phone == '') {
					uni.showToast({
						title: '请输入联系电话',
						icon: 'none'
					})
					return
				}
				if (this.address == '') {
					uni.showToast({
						title: '请输入校区地址',
						icon: 'none'
					})
					return
				}

				const urlsArray5 = that.fileList5.map(imageObject => imageObject.url);
				const urlsArray6 = that.fileList6.map(imageObject => imageObject.url);
				const urlsArray7 = that.fileList7.map(imageObject => imageObject.url);
				let params = {
					venue_thumb: this.url_phone,
					venue_name: this.venue_name,
					leader: this.leader,
					banner: urlsArray5,
					environment: urlsArray6,
					certification: urlsArray7,
					phone: this.phone,
					address: this.address,
					description: this.description,
					projects: this.jiaoSelect,
					pid: this.pid,
					id: this.id
				};
				let res = await venues.schoolcreate(params);
				if (res.code === 1) {
					uni.$u.toast(res.info);
					setTimeout(() => {
						uni.navigateBack({
							delta: 1 // 返回上一页面，如果页面栈中只有一个页面则该方法不会生效
						});
					}, 1000)
				}
			},
			shuju() {
				this.occupation_status.push(
					this.occupation_list
				)
			},
			// 职业
			addoccupation(e) {
				this.userInfo.occupation_relation = e.value[0].label
				this.userInfo.occupation_relation_id = e.value[0].id
				this.showoccupation = false
			},

			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			// 新增图片
			// 新增图片
			async afterRead(event) {
				// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: this.url_phone
					}))
					fileListLen++
				}
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: 'https://sass-test.doit10019.com/api/upload/uploadOneImage', // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						formData: {
							// user: 'test',
							project_id: getApp().globalData.projectId,
							app_id: this.$https.weixinAppId,

						},
						success: (res) => {
							let result = JSON.parse(res.data);
							this.url_phone = result.data.url
							setTimeout(() => {
								resolve(this.url_phone)
							}, 1000)
						}
					});
				})
			},
			// // 删除图片
			// deletePic2(event) {
			// 	this.url_list2.splice(event.index, 1)
			// 	this[`fileList${event.name}`].splice(event.index, 1)
			// },
			// // 新增图片
			// async afterRead2(event) {
			// 	// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
			// 	let lists = [].concat(event.file)
			// 	let fileListLen = this[`fileList${event.name}`].length
			// 	lists.map((item) => {
			// 		this[`fileList${event.name}`].push({
			// 			...item,
			// 			status: 'uploading',
			// 			message: '上传中'
			// 		})
			// 	})
			// 	for (let i = 0; i < lists.length; i++) {
			// 		const result = await this.uploadFilePromise2(lists[i].url)
			// 		let item = this[`fileList${event.name}`][fileListLen]
			// 		this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
			// 			status: 'success',
			// 			message: '',
			// 			url: result
			// 		}))
			// 		fileListLen++
			// 	}
			// },
			// uploadFilePromise2(url) {
			// 	return new Promise((resolve, reject) => {
			// 		let a = uni.uploadFile({
			// 			url: 'https://sass-test.doit10019.com/api/upload/uploadOneImage', // 仅为示例，非真实的接口地址
			// 			filePath: url,
			// 			name: 'file',
			// 			// header: {
			// 			// 	token: uni.getStorageSync("token")
			// 			// },
			// 			// formData: {
			// 			// 	source: '圈子',
			// 			// 	type: 'post'
			// 			// },
			// 			success: (res) => {
			// 				let result = JSON.parse(res.data);
			// 				this.url_list2.push(result.data)
			// 				setTimeout(() => {
			// 					resolve(res.data.data)
			// 				}, 1000)
			// 			}
			// 		});
			// 	})
			// },
			afterRead5(event) {
				let that = this
				const {
					file
				} = event.detail;
				// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
				wx.uploadFile({
					url: 'https://sass-test.doit10019.com/api/upload/uploadOneImage', // 仅为示例，非真实的接口地址
					filePath: file.url,
					name: 'file',
					formData: {
						// user: 'test',
						project_id: getApp().globalData.projectId,
						app_id: this.$https.weixinAppId,
						user: 'test',
					},
					success(res) {
						// 上传完成需要更新 fileList
						let result = JSON.parse(res.data);
						const fileList = that.fileList5 || [];
						fileList.push({
							...file,
							url: result.data.url,
						});
						that.fileList5 = fileList;
					},
				});
			},
			deleteImg5(event) {
				const index = event.detail.index;
				this.fileList5.splice(index, 1);
				// this.fileList.splice(event.detail, 1);
			},

			afterRead6(event) {
				let that = this
				const {
					file
				} = event.detail;
				// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
				wx.uploadFile({
					url: 'https://sass-test.doit10019.com/api/upload/uploadOneImage', // 仅为示例，非真实的接口地址
					filePath: file.url,
					name: 'file',
					formData: {
						// user: 'test',
						project_id: getApp().globalData.projectId,
						app_id: this.$https.weixinAppId,
						user: 'test',
					},
					success(res) {
						// 上传完成需要更新 fileList
						let result = JSON.parse(res.data);
						const fileList = that.fileList6 || [];
						fileList.push({
							...file,
							url: result.data.url,
						});
						that.fileList6 = fileList;
					},
				});
			},
			deleteImg6(event) {
				const index = event.detail.index;
				this.fileList6.splice(index, 1);
				// this.fileList.splice(event.detail, 1);
			},
			afterRead7(event) {
				let that = this
				const {
					file
				} = event.detail;
				// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
				wx.uploadFile({
					url: 'https://sass-test.doit10019.com/api/upload/uploadOneImage', // 仅为示例，非真实的接口地址
					filePath: file.url,
					name: 'file',
					formData: {
						// user: 'test',
						project_id: getApp().globalData.projectId,
						app_id: this.$https.weixinAppId,
						user: 'test',
					},
					success(res) {
						// 上传完成需要更新 fileList
						let result = JSON.parse(res.data);
						const fileList = that.fileList7 || [];
						fileList.push({
							...file,
							url: result.data.url,
						});
						that.fileList7 = fileList;
					},
				});
			},
			deleteImg7(event) {
				const index = event.detail.index;
				this.fileList7.splice(index, 1);
			},
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		width: 100%;
		// height: 100vh;
		background-color: #EDF5F5;

		.group_3 {
			background-color: rgba(255, 255, 255, 1.000000);
			width: 710rpx;
			height: 100%;
			display: flex;
			flex-direction: column;
			margin: 20rpx 0 0 20rpx;

			.item {
				// padding: 29rpx 30rpx 30rpx;
				padding: 25rpx 30rpx 20rpx 30rpx;

				.atinput {
					// border: #EBECEE 1rpx solid;
					font-size: 24rpx;
					height: 60rpx;
					width: 600rpx;
					padding-left: 20rpx;
				}

				.item-title {
					color: rgb(153, 153, 153);
					font-size: 28rpx;
					font-weight: 500;
					margin-bottom: 20rpx;
				}

				.value {
					color: rgb(51, 51, 51);
					font-size: 28rpx;
					font-weight: 500;
				}

				.time-cell {
					color: rgb(51, 51, 51);
					font-size: 28rpx;
					font-weight: 500;
					justify-content: flex-start;

					.time {
						width: 49%;

						&:last-of-type {
							margin-left: 20rpx;
						}
					}
				}

				.week-list {
					display: grid;
					grid-template-columns: repeat(5, 1fr);
					grid-gap: 20rpx;
					position: relative;

					.week-item {
						padding: 15rpx 0;
						background-color: rgb(243, 243, 243);
						border-radius: 5rpx;
						text-align: center;
						color: rgb(51, 51, 51);
						font-size: 24rpx;
						font-weight: 500;
						border: solid 2rpx transparent;
						box-sizing: border-box;
					}

					.active {
						color: rgba(255, 98, 0, 1);
						background-color: rgba(255, 65, 5, 0.1);
						// border: solid 2rpx rgb(99, 93, 247);
						position: relative;

						// &:before {
						// 	display: block;
						// 	content: '';
						// 	position: absolute;
						// 	width: 27rpx;
						// 	height: 28rpx;
						// 	right: -2rpx;
						// 	bottom: -2rpx;
						// 	background-image: url("https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/46b1cc85fcb0fd76095daf823b7d2bb4a3235519.png");
						// 	background-repeat: no-repeat;
						// 	background-size: 100%;
						// }
					}

					.active1 {
						color: rgba(255, 98, 0, 1);
						background-color: rgba(255, 65, 5, 0.1);
						// border: solid 2rpx rgb(99, 93, 247);
						position: relative;
					}

					.active2 {
						color: rgba(255, 98, 0, 1);
						background-color: rgba(255, 65, 5, 0.1);
						// border: solid 2rpx rgb(99, 93, 247);
						position: relative;
					}

					.check {
						color: rgb(51, 51, 51);
						font-size: 24rpx;
						position: absolute;
						bottom: 10rpx;
						right: 0;
					}
				}
			}
		}

		.text_2 {
			width: 93rpx;
			height: 23rpx;
			overflow-wrap: break-word;
			color: rgba(136, 136, 136, 1);
			font-size: 24rpx;
			font-family: PingFang-SC-Medium;
			font-weight: 500;
			text-align: left;
			white-space: nowrap;
			line-height: 34rpx;
			margin: 15rpx 0 0 21rpx;
		}

		.section_2 {
			background-color: rgba(229, 229, 229, 1.000000);
			width: 672rpx;
			height: 1rpx;
			display: flex;
			flex-direction: column;
			margin: 40rpx 0 0 18rpx;
		}

		.text_3 {
			width: 47rpx;
			height: 23rpx;
			overflow-wrap: break-word;
			color: rgba(136, 136, 136, 1);
			font-size: 24rpx;
			font-family: PingFang-SC-Medium;
			font-weight: 500;
			text-align: left;
			white-space: nowrap;
			line-height: 34rpx;
			margin: 42rpx 0 0 19rpx;
		}

		.text_4 {
			width: 82rpx;
			height: 26rpx;
			overflow-wrap: break-word;
			color: rgba(51, 51, 51, 1);
			font-size: 28rpx;
			font-family: PingFang-SC-Medium;
			font-weight: 500;
			text-align: left;
			white-space: nowrap;
			line-height: 34rpx;
			margin: 24rpx 0 0 20rpx;
		}

		.section_3 {
			background-color: rgba(229, 229, 229, 1.000000);
			width: 672rpx;
			height: 1rpx;
			display: flex;
			flex-direction: column;
			margin: 40rpx 0 0 18rpx;
		}

		.text_5 {
			width: 47rpx;
			height: 23rpx;
			overflow-wrap: break-word;
			color: rgba(136, 136, 136, 1);
			font-size: 24rpx;
			font-family: PingFang-SC-Medium;
			font-weight: 500;
			text-align: left;
			white-space: nowrap;
			line-height: 34rpx;
			margin: 39rpx 0 0 19rpx;
		}

		.text_6 {
			width: 82rpx;
			height: 26rpx;
			overflow-wrap: break-word;
			color: rgba(51, 51, 51, 1);
			font-size: 28rpx;
			font-family: PingFang-SC-Medium;
			font-weight: 500;
			text-align: left;
			white-space: nowrap;
			line-height: 34rpx;
			margin: 24rpx 0 0 20rpx;
		}

		.section_4 {
			background-color: rgba(229, 229, 229, 1.000000);
			width: 672rpx;
			height: 1rpx;
			display: flex;
			flex-direction: column;
			margin: 40rpx 0 0 18rpx;
		}

		.text_7 {
			width: 95rpx;
			height: 23rpx;
			overflow-wrap: break-word;
			color: rgba(136, 136, 136, 1);
			font-size: 24rpx;
			font-family: PingFang-SC-Medium;
			font-weight: 500;
			text-align: left;
			white-space: nowrap;
			line-height: 34rpx;
			margin: 39rpx 0 0 19rpx;
		}

		.image_2 {
			width: 151rpx;
			height: 151rpx;
			margin: 25rpx 0 0 18rpx;
		}


		.text_8 {
			width: 95rpx;
			height: 23rpx;
			overflow-wrap: break-word;
			color: rgba(136, 136, 136, 1);
			font-size: 24rpx;
			font-family: PingFang-SC-Medium;
			font-weight: 500;
			text-align: left;
			white-space: nowrap;
			line-height: 34rpx;
			margin: 20rpx 0 0 19rpx;
		}

		.section_6 {
			width: 378rpx;
			height: 62rpx;
			flex-direction: row;
			display: flex;
			justify-content: space-between;
			margin: 26rpx 0 27rpx 21rpx;
		}

		.button_1 {
			background-color: rgba(243, 243, 243, 1.000000);
			height: 62rpx;
			display: flex;
			flex-direction: column;
			width: 174rpx;
		}

		.text_9 {
			width: 48rpx;
			height: 24rpx;
			overflow-wrap: break-word;
			color: rgba(51, 51, 51, 1);
			font-size: 24rpx;
			font-family: PingFang-SC-Medium;
			font-weight: 500;
			text-align: left;
			white-space: nowrap;
			line-height: 34rpx;
			margin: 19rpx 0 0 63rpx;
		}

		.button_2 {
			background-color: rgba(255, 65, 5, 0.100000);
			height: 62rpx;
			display: flex;
			flex-direction: column;
			width: 174rpx;
		}

		.text_10 {
			width: 73rpx;
			height: 24rpx;
			overflow-wrap: break-word;
			color: rgba(255, 98, 0, 1);
			font-size: 24rpx;
			font-family: PingFang-SC-Medium;
			font-weight: 500;
			text-align: left;
			white-space: nowrap;
			line-height: 34rpx;
			margin: 19rpx 0 0 51rpx;
		}

		.button_3 {
			width: 90%;
			height: 80rpx;
			position: fixed;
			bottom: 20rpx;
			background: linear-gradient(0deg, rgba(214, 53, 53, 0.9), rgba(255, 64, 64, 0.93), rgba(250, 142, 142, 0.93));
			border-radius: 80rpx 80rpx;
			margin-left: 5%;
			color: #fff;
			font-size: 28rpx;
			z-index: 999;
		}
	}
</style>